<template>
	<div class="no-skin">
		<!-- 标题、消息栏 -->
		<navbar></navbar>

		<div class="main-container ace-save-state" id="main-container">

			<!-- 菜单栏 -->
			<div id="sidebar" class="sidebar responsive ace-save-state">
				<!-- 侧边栏快捷方式 -->
				<sidebarShortcuts/>

				<!-- 菜单栏-列表 -->
				<ul class="nav nav-list">
					
					<li class="hover highlight" id="home-sidebar">
						<router-link to="/home">
							<i class="menu-icon fa fa-tachometer"></i>
							<span class="menu-text"> 首页 </span>
						</router-link>
					</li>

					<li class="hover highlight" id="system-sidebar">
							<a href="#" class="dropdown-toggle">
								<i class="menu-icon fa fa-cog"></i>
								<span class="menu-text"> 系统管理 </span>
								<b class="arrow fa fa-angle-down"></b>
							</a>
					
							<ul class="submenu">
								
								<li class="hover">
									<router-link to="/system/user">
										<i class="menu-icon fa fa-caret-right"></i>
										用户管理
									</router-link>
								</li>		
								
								<li class="hover">
									<router-link to="/system/role">
										<i class="menu-icon fa fa-caret-right"></i>
										角色管理
									</router-link>
								</li>											
																
								<li class="hover">
									<router-link to="/system/resource">
										<i class="menu-icon fa fa-caret-right"></i>
										资源管理
									</router-link>
								</li>																			

							</ul>
						</li>

					<li class="hover highlight" id="business-sidebar">
							<a href="#" class="dropdown-toggle">
								<i class="menu-icon fa fa-list"></i>
								<span class="menu-text"> 业务管理 </span>
								<b class="arrow fa fa-angle-down"></b>
							</a>
					
							<ul class="submenu">
								
								<li class="hover">
									<router-link to="/business/file">
										<i class="menu-icon fa fa-caret-right"></i>
										文件管理
									</router-link>
								</li>											
								
								<li class="hover">
									<router-link to="/business/category">
										<i class="menu-icon fa fa-caret-right"></i>
										分类管理
									</router-link>
								</li>								
								
								<li class="hover">
									<router-link to="/business/course">
										<i class="menu-icon fa fa-caret-right"></i>
										课程管理
									</router-link>
								</li>
								
								<li class="hover">
									<router-link to="/business/teacher">
										<i class="menu-icon fa fa-caret-right"></i>
										教师管理
									</router-link>
								</li>								
								
								
							</ul>
						</li>
						
					<li class="hover highlight" id="file-sidebar">
						<router-link to="/file">
							<i class="menu-icon fa fa-file"></i>
							<span class="menu-text"> 文件管理 </span>
						</router-link>
					</li>						
					
				</ul><!-- /.nav-list -->

			</div>
			
			<!-- 内容区 -->
			<mainContent :breadcrumb="breadcrumb" />
			<!-- 页脚 -->
			<foot/>

		</div><!-- /.main-container -->

	</div>
</template>

<script>
	import navbar from '@/views/components/home/navbar.vue'
	import foot from '@/views/components/home/footer.vue'
	import mainContent from '@/views/components/home/mainContent.vue'
	import sidebarShortcuts from '@/views/components/home/sidebarShortcuts.vue'
	
	export default {
		name: 'index',
		data() {
			return {
				activeEle: null,
				breadcrumbs: {
					'/home': ['首页'], 
					'/system/user': ['系统管理', '用户管理'],
					'/system/role': ['系统管理', '角色管理'],
					'/system/resource': ['系统管理', '资源管理'],
					'/business/category': ['业务管理', '分类管理'],
					'/business/course': ['业务管理', '课程管理'],
					'/business/chapter': ['业务管理', '课程管理', '大章管理'], 
					'/business/section': ['业务管理', '课程管理', '大章管理', '小节管理'],
					'/business/teacher': ['业务管理', '教师管理'],
					'/file': ['文件管理'],
				}
			}
		},
		computed: {
			breadcrumb () {
				var path = this.$route.path
				return this.breadcrumbs[path]
			}
		},
		components: {
			navbar,
			foot,
			mainContent,
			sidebarShortcuts
		},
		mounted() {
			this.routeChange()
		},
		watch: {
			$route() {
				this.routeChange()
			}
		},
		methods: {
			routeChange () {
				var path = this.$route.path
				var id = path.split('/')[1] + '-sidebar'
				var ele = document.getElementById(id)
				if(this.activeEle) this.activeEle.classList.remove('active')
				if(!ele) return
				ele.classList.add('active')
				this.activeEle = ele				
			}
		}
	}
</script>

<style>
</style>
